<!-- 微信聊天管理 -->
<template>

  <div id='app' style='background: white'>
    <div class='toolbar'>
      <toolbar></toolbar>
    </div>
    <div class='sidebar'>
      <card></card>
      <list></list>
    </div>
    <div class='main'>
      <chattitle></chattitle>
      <message></message>
      <usertext></usertext>
    </div>
  </div>

  <!--  <div>
      账号：
      <el-input placeholder='请输入内容' v-model='username' clearable style='width: 10%'></el-input>

      密码：
      <el-input placeholder='请输入密码' v-model='password' show-password style='width: 10%'></el-input>

      <el-row>
        <el-button @click='login()'>默认按钮</el-button>
      </el-row>

      <el-input placeholder='收件人' v-model='toName' clearable style='width: 10%'></el-input>
      <el-input placeholder='请输入内容' v-model='message' clearable style='width: 10%'></el-input>

      <el-row>
        <el-button @click='sendMessage()'>发送消息</el-button>
      </el-row>
    </div>-->
</template>

<script>
import { deleteParamRequest, deletePostRequest, getRequest, postRequest, putRequest } from '../../../utils';
import toolbar from './chat/toolbar';

export default {
  name: 'wechat',
  data() {
    return {
      username: '张三',
      password: '123',
      path: 'ws://localhost:9003/example-websocket/chat',
      message: '',
      toName: ''
    };
  },
  created() {

  },
  components: {
    toolbar
  },
  methods: {
    // 获取菜单数据
    getMenu() {
      getRequest('user-center/menu/selectMenuList', null).then(res => {
        this.menus = res.data;
      });
    },
    // login 登录按钮
    login() {
      console.log('this is test login............');
      var loginQuery = {
        user: this.username,
        pwd: this.password
      };
      getRequest('example-websocket/toLogin', loginQuery).then(res => {
        console.log(res);
        this.wsinit();
      });
    },
    sendMessage() {
      this.send();
    },
    wsinit() {
      if (typeof (WebSocket) === 'undefined') {
        alert('您的浏览器不支持socket');
      } else {
        var host = window.location.host;
        // 实例化socket
        this.socket = new WebSocket('ws://127.0.0.1:9003/example-websocket/chat/' + this.username);
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
      }
    },
    open: function() {
      console.log('socket连接成功');
    },
    error: function() {
      console.log('连接错误');
    },
    getMessage: function(msg) {
      console.log(msg.data);
    },
    send: function() {
      var message = {
        toName: this.toName,
        message: this.message,
        fromName: this.username
      };

      var s = JSON.stringify(message);
      console.log(s);
      this.socket.send(s);
    },
    close: function() {
      console.log('socket已经关闭');
    }
  },
  destroyed() {
    // 销毁监听
    this.socket.onclose = this.close;
  }
};
</script>

<style lang='scss' scoped>

</style>
